<template>
	<!-- 监控 -→ 环境监测界面 -->
	<view class="container">
		<view class="search-fixed">
			<!-- 选择项 -->
			<view class="choose-home">
				<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected'></ren-dropdown-filter>
			</view>
			<!-- 搜索框 -->
			<view class="search-block">
				<search-block @click='getSearchList' @cancel="cancelSearch"></search-block>
			</view>

		</view>
		<!-- 环境监控列表 -->
		<view class="environment-items">
			<environment-monitor-items :list="environmentMonitorList" @click="toEnDetail"></environment-monitor-items>
		</view>
	</view>
</template>

<script>
	import renDropdown from '../../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import environmentMonitorItems from '../../components/environment-items/environment-items.vue'
	import searchBlock from '../../components/search-block/search-block.vue'
	export default {
		components: {
			renDropdown,
			environmentMonitorItems,
			searchBlock
		},
		data() {
			return {
				searchIcon: '../../static/image/monitor/searchIcon.png',
				clearIcon: '../../static/image/monitor/clearIcon.png',
				isCancel: true,
				filterData: [
					[{
						text: '配电房1',
						value: ''
					}, {
						text: '状态1',
						value: 1
					}, {
						text: '状态2',
						value: 2
					}, {
						text: '状态3',
						value: 3
					}]
				],
				defaultIndex: [0],
				environmentMonitorList: [],
				testList: [{
						id: 1011,
						type: '1',
						name: '温度1',
						upper: 1,
						number: '68℃',
						time: '2020-10-31 16:23:23'

					}, {
						id: 1012,
						type: '1',
						name: '温度1',
						upper: 0,
						number: '28℃',
						time: '2020-10-31 16:23:23'
					}, {
						id: 1013,
						type: '2',
						name: '湿度1',
						upper: 1,
						number: '85%',
						time: '2020-10-31 16:23:23'
					},
					{
						id: 1014,
						type: '2',
						name: '湿度1',
						upper: 0,
						number: '13%',
						time: '2020-10-31 16:23:23'
					},
					{
						id: 1015,
						type: '1',
						name: '温度1',
						upper: 1,
						number: '68℃',
						time: '2020-10-31 16:23:23'

					}, {
						id: 1016,
						type: '1',
						name: '温度2',
						upper: 0,
						number: '28℃',
						time: '2020-10-31 16:23:23'
					}, {
						id: 1017,
						type: '2',
						name: '湿度2',
						upper: 1,
						number: '85%',
						time: '2020-10-31 16:23:23'
					},
					{
						id: 1018,
						type: '2',
						name: '湿度1',
						upper: 0,
						number: '13%',
						time: '2020-10-31 16:23:23'
					}
				],
				searchList: [{
					id: 1011,
					type: '1',
					name: '温度1',
					upper: 1,
					number: '68℃',
					time: '2020-10-31 16:23:23'
				}, {
					id: 1012,
					type: '2',
					name: '温度1',
					upper: 1,
					number: '78℃',
					time: '2020-10-31 16:23:23'
				}], //通过关键字查询出的结果数据
				keywords: '', // 搜索的关键字
				isFocus: false,
			}
		},
		mounted() {
			this.environmentMonitorList = this.testList
			this.defaultList = this.environmentMonitorList
			// console.log('default', this.defaultList, 'environ', this.environmentMonitorList)
		},
		methods: {
			onSelected(res) {
				console.log(res)
			},
			// 通过关键字搜索的方法
			queryList(keywords) {
				// 调用接口 输入参数为具体的关键字内容,取消的关键字为null
				return this.environmentMonitorList = this.searchList
			},
			// 获取聚焦
			getFocus() {
				this.isFocus = true
			},
			// 失焦
			getBlur() {
				this.isFocus = false
			},
			getSearchList(keywords) {
				// 将keywords 作为参数传到后台
				console.log('key', keywords)
				var objectArr = this.queryList(this.keywords)
				this.environmentMonitorList = Array.from(objectArr)
			},
			cancelSearch(keywords){
				console.log('celkey', keywords)
				this.environmentMonitorList = this.defaultList
			},
			// 搜索
			searchMe(e) {
				// 获取搜索的内容
				console.log('keywords', this.keywords)
				// 通过接口传入关键字, 查找出符合结果的数据, 测试数据this.list
				// keywords 存在 传入参数值为keywords的值
				// 取消 keywords 为null
				// var arr = []
				// this.environmentMonitorList.forEach((item) => arr.push(item))
				// if(this.keywords) {
				// 	this.environmentMonitorList = this.environmentMonitorList.filter(item => item.name.includes(this.keywords))
				// 	console.log(this.environmentMonitorList)
				// }
				var objectArr = this.queryList(this.keywords)
				this.environmentMonitorList = Array.from(objectArr)
				this.isCancel = !this.isCancel
				if (!this.keywords) {
					this.isCancel = true
				}
				if (this.isCancel) {
					this.keywords = ''
				}
				if (this.isCancel == true) {
					this.environmentMonitorList = this.defaultList
				}
			},
			// 清空输入框内容
			clearInput() {
				this.keywords = ''
				this.isCancel = true
				// 清空输入框时,
				this.environmentMonitorList = this.defaultList
				// console.log('clear', this.environmentMonitorList)
			},
			toEnDetail(e) {
				var id = JSON.stringify(e.id)
				uni.navigateTo({
					url: '/pages/environment-detail/environment-detail?dataItem=' + JSON.stringify(e) ,
				})
				console.log('qq22ee', e)
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #f4f4f4;

		.search-fixed {
			display: flex;
			flex-direction: row;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			z-index: 999;
			height: 88rpx;
			white-space: nowrap;
		}

	/* 	.search-block {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			padding: 0 24rpx;
		}
		.choose-home {
			width: 100%;
			height: 70rpx;
			margin-bottom: 10rpx;
			background-color: #fff;
		} */

		.environment-items {
			margin-top: 88rpx;
		}
	}
</style>
